<!--歌单等图片-->
<template>
    <div class="item-image"
         @mouseenter="isShowPlayIcon = true"
         @mouseleave="isShowPlayIcon = false">
        <el-image
                :src="resizePic"
                fit="cover"
                :lazy="true"
                :class="{'image-round':imageDetail.isRound,'image-square':!imageDetail.isRound}">
            <div slot="placeholder" class="image-placeholder">
                加载中<span class="dot">...</span>
            </div>
        </el-image>
        <!--右上角描述-->
        <div class="play-count" v-show="imageDetail.isShowInfo">
            <font-awesome-icon icon="fas fa-play" class="play-count-icon"/>
            <p>{{ imageDetail.playCount }}</p>
        </div>
        <div :class="{shadow:isShowPlayIcon,'image-round':imageDetail.isRound,'image-square':!imageDetail.isRound}"
             :style="backgroundImages"></div>
        <!--中间显示的播放图标-->
        <div class="img-mask" v-show="isShowPlayIcon && imageDetail.hasPlayIcon">
            <font-awesome-icon icon="fas fa-play" class="sing-list-play"/>
        </div>
    </div>
</template>

<script>

export default {
    name: 'ItemImg',
    props: ['imageDetail'],
    data() {
        return {
            // imageDetail: {
            //     picUrl: 'https://p2.music.126.net/wRiwy65LSxv9X43B-zlBMA==/109951163550232716.jpg',
            //     isShowInfo: false,
            //     isRound: false,
            // },
            isShowPlayIcon: false
        }
    },
    computed: {
        resizePic() {
            if (this.imageDetail.hasPlayIcon) {
                return `${this.imageDetail.picUrl}?param=500y500`
            }
            return `${this.imageDetail.picUrl}`
        },
        backgroundImages() {
            return {
                background: `url(${this.resizePic}) no-repeat center`,
                backgroundSize: 'cover'
            }
        }
    },
}
</script>

<style scoped lang="less">
.item-image {
  position: relative;
  top: 0;
  right: 0;
  cursor: pointer;
  //width: 12.5vw;
  //height: 12.5vw;
  //overflow: hidden;

  //播放量
  .play-count {
    position: absolute;
    right: 1vw;
    top: -.3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;

    .play-count-icon {
      font-size: .7vw;
    }

    > p {
      margin-left: .5vw;
      font-weight: bolder;
      font-size: .7vw;
    }
  }

  //播放按钮
  .img-mask {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .2);
    backdrop-filter: saturate(180%) blur(20px);

    .sing-list-play {
      font-size: 3vw;
      color: #FFFFFF;
      margin-left: .5vw;
    }
  }

  //图片阴影
  .shadow {
    position: absolute;
    top: .8vw;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    filter: blur(16px) opacity(0.6);
    transform: scale(.92, .96);
  }

  //圆形图片
  .image-round {
    border-radius: 50%;
  }

  //圆角图片
  .image-square {
    border-radius: 1vw;
  }
}
</style>
